<!DOCTYPE html>
<html lang="cn">
    <head>
        <meta charset="UTF-8" />
        <!-- <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, user-scalable=no"
        /> -->
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
        />

        <meta name="renderer" content="webkit" />
        <title>新国葆</title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link rel="Shortcut Icon" href="" />
        <link rel="Bookmark" href="" />
        <link rel="stylesheet" href="static/css/fxfullwidth.css" />
        <!--banner样式-->
        <link
            rel="stylesheet"
            type="text/css"
            href="static/css/style.min.css"
        />
        <link
            rel="stylesheet"
            type="text/css"
            href="static/css/swiper.min.css"
        />
        <link
            rel="stylesheet"
            type="text/css"
            href="static/css/animate.min.css"
        />
        <link rel="stylesheet" href="static/css/respond.css" />
        <link rel="stylesheet" href="static/css/module/index.css" />
        <script type="text/javascript" src="static/js/vue.min.js"></script>
        <script
            type="text/javascript"
            src="static/js/modernizr.custom.js"
        ></script>
        <script type="text/javascript" src="static/js/swiper.min.js"></script>
        <meta id="i18n_pagename" content="common" />
        <style>
            #banner {
                background: #000 url("static/image/logo.png") no-repeat center;
                background-size: 167px 38px !important;
            }
        </style>
    </head>
    <body>
        <div id="bloc">
            <header>
                <nav class="pc-nav pc scroll-animate" data-effect="fadeIn">
                    <div class="left">
                        <a href="" title="">
                            <img
                                class="lazy img1"
                                :data-src="logoImg"
                                alt="logo"
                            />
                            <img
                                class="lazy img2"
                                :data-src="logoImg2"
                                alt="logo"
                            />
                        </a>
                        <div class="mid">
                            <ul class="items">
                                <li
                                    v-for="(item,i) in navList"
                                    :key="i"
                                    class="cursorNone"
                                    :class="{'on':navIndex == i}"
                                >
                                    <a
                                        :href="item.url"
                                        class="f-16"
                                        data-note="item.title"
                                        ><span
                                            :name="item.title"
                                            class="i18n"
                                        ></span
                                    ></a>
                                </li>
                            </ul>
                        </div>
                    </div>
                    <div class="right">
                        <div class="search">
                            <a href="search.html" class="searchGo f-24"
                                ><img
                                    class="img1"
                                    src="static/image/search_icon.png"
                                    alt="" /><img
                                    class="img2"
                                    src="static/image/search_icon2.png"
                                    alt=""
                            /></a>
                        </div>
                        <div class="language">
                            <img
                                class="img1"
                                src="static/image/language.png"
                                alt=""
                            />
                            <img
                                class="img2"
                                src="static/image/language2.png"
                                alt=""
                            />
                            <select name="language" id="language">
                                <option value="zh-CN">中文</option>
                                <option value="en">ENG</option>
                            </select>
                        </div>
                    </div>
                </nav>
                <nav class="app-nav app">
                    <div class="inner_top">
                        <div class="topic">
                            <div class="app-logo">
                                <a href="">
                                    <img
                                        class="lazy img1"
                                        :data-src="logoImg"
                                        alt="logo"
                                    />
                                    <img
                                        class="lazy img2"
                                        :data-src="logoImg2"
                                        alt="logo"
                                    />
                                </a>
                            </div>
                            <a href="search.html" class="app-search"
                                ><img src="" alt=""
                            /></a>
                            <div id="app-menu">
                                <span class="line"></span>
                                <span class="line"></span>
                                <span class="line"></span>
                            </div>
                        </div>
                    </div>
                    <div class="inner_mid">
                        <div class="nav-items">
                            <div class="child_first">
                                <div
                                    class="firstList"
                                    :class="{'down_el':item.children}"
                                    v-for="(item,i) in navList"
                                    :key="i"
                                >
                                    <a
                                        :href="item.url"
                                        class="f-16 i18n"
                                        :name="item.title"
                                        :class="{'red':navIndex == i}"
                                    ></a>
                                </div>
                            </div>
                        </div>
                        <select
                            name="language"
                            id="language1"
                            style="
                                position: absolute;
                                bottom: 10px;
                                left: 50%;
                                transform: translate(-50%) scale(1.2);
                                line-height: 20px;
                            "
                        >
                            <option value="zh-CN">中文</option>
                            <option value="en">ENG</option>
                        </select>
                    </div>
                </nav>
            </header>
            <article class="wrapper" id="home">
                <div data-scroll="">
                    <div id="main">
                        <!-- banner -->
                        <div class="row" data-nav="0" data-vh="1" id="banner">
                            <div class="scroll">
                                <a class="scroll_a"
                                    ><img
                                        src="static/image/scroll_down.png"
                                        alt=""
                                /></a>
                            </div>

                            <div class="swiper">
                                <div class="swiper-wrapper">
                                    <div
                                        class="swiper-slide"
                                        v-for="(item,i) in banners"
                                        :key="i"
                                    >
                                        <div class="inner max-wid">
                                            <p
                                                class="f-16 scroll-animate flex"
                                                data-effect="fn3"
                                            >
                                                <span class="bannerIndex f-16"
                                                    >01</span
                                                >/<span class="total_num f-16"
                                                    >0{{banners.length}}</span
                                                >
                                            </p>
                                            <h2
                                                class="f-60 scroll-animate mt-30"
                                                data-effect="fn3"
                                                v-html="userLanguage === ZH_CN?
                                                item.description
                                                :item.description_en"
                                            ></h2>
                                            <p
                                                class="f-16 mt-14 scroll-animate"
                                                data-effect="fadeInDownSmall"
                                                data-delay=".1"
                                                v-html="item.description_en"
                                            ></p>
                                            <div
                                                class="more_btn mt-30 mb-30 scroll-animate"
                                                data-effect="fn3"
                                                data-delay=".1"
                                            >
                                                <a href="" class="f-18">
                                                    {{userLanguage === ZH_CN ?
                                                    "查看更多": "View More"}}
                                                    <img
                                                        src="static/image/add.png"
                                                /></a>
                                            </div>
                                            <div
                                                class="swiper-pagination swiper-pagination-white scroll-animate"
                                                data-effect="fn3"
                                                data-delay=".1"
                                            ></div>
                                        </div>
                                        <div class="img">
                                            <img
                                                :src="basePath + item.img_url"
                                                alt=""
                                            />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <!-- 关于我们 -->
                        <div class="row r1" data-nav="1">
                            <div class="bg_txt">
                                <img src="static/image/xinguobao.png" alt="" />
                            </div>
                            <div class="max-wid about_cont mb-100 pb-24">
                                <div class="about_top flex-between flex-center">
                                    <div
                                        class="title scroll-animate"
                                        data-effect="fn3"
                                    >
                                        <h3 class="f-16">
                                            <span class="red">ABOUT</span>
                                            XINGUOBAO
                                        </h3>
                                        <h2 class="f-30 mt-10">
                                            {{userLanguage === ZH_CN?
                                            company.name: company.name_en}}
                                        </h2>
                                        <p
                                            class="f-16 mt-26"
                                            v-html="userLanguage ===
                                            ZH_CN?company.introduction:company.introduction_en"
                                        ></p>
                                    </div>
                                    <div class="about_icon flex-center">
                                        <div
                                            class="li scroll-animate"
                                            data-effect="fn3"
                                            data-delay=".1"
                                        >
                                            <div class="icon">
                                                <img
                                                    src="static/image/i_icon1.png"
                                                    alt=""
                                                />
                                            </div>
                                            <div class="mt-20 txt">
                                                <h3
                                                    class="f-30 i18n"
                                                    name="technology_oriented"
                                                ></h3>
                                                <span class="f-14 mt-20"
                                                    >TECHNOLOGY</span
                                                >
                                            </div>
                                        </div>
                                        <div
                                            class="li scroll-animate"
                                            data-effect="fn3"
                                            data-delay=".2"
                                        >
                                            <div class="icon">
                                                <img
                                                    src="static/image/i_icon2.png"
                                                    alt=""
                                                />
                                            </div>
                                            <div class="mt-20 txt">
                                                <h3
                                                    class="f-30 i18n"
                                                    name="continuous_innovation"
                                                ></h3>
                                                <span class="f-14 mt-20"
                                                    >INNOVATE</span
                                                >
                                            </div>
                                        </div>
                                        <div
                                            class="li scroll-animate"
                                            data-effect="fn3"
                                            data-delay=".3"
                                        >
                                            <div class="icon">
                                                <img
                                                    src="static/image/i_icon3.png"
                                                    alt=""
                                                />
                                            </div>
                                            <div class="mt-20 txt">
                                                <h3
                                                    class="f-30 i18n"
                                                    name="service_first"
                                                ></h3>
                                                <span class="f-14 mt-20"
                                                    >SERVICE</span
                                                >
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="about_photo mt-100">
                                    <ul class="about_p_ul">
                                        <li
                                            v-for="(item,i) in photoList"
                                            :key="i"
                                            class="scroll-animate flex"
                                            data-effect="fadeInDownSmall"
                                            :data-delay="'.'+ (i+1)"
                                        >
                                            <img :src="item.imgUrl" alt="" />
                                        </li>
                                    </ul>
                                </div>
                                <div
                                    class="more_btn black_btn mt-100 scroll-animate mauto"
                                    data-effect="fn3"
                                    data-delay=".1"
                                >
                                    <a href="/about_company.html" class="f-18">
                                        <span
                                            style="font-size: 18px"
                                            class="i18n"
                                            name="understand_us"
                                        ></span>
                                        <img src="static/image/add_red.png"
                                    /></a>
                                </div>
                            </div>
                        </div>
                        <!-- 我们的产品 -->
                        <div
                            class="row r2"
                            data-nav="1"
                            :style="'background-image: url(' + r2_background + ')'"
                        >
                            <div class="product max-wid pb-100" data-nav="1">
                                <div class="about_top flex-between flex-end">
                                    <div
                                        class="title scroll-animate"
                                        data-effect="fn3"
                                    >
                                        <h3 class="f-16">
                                            <span class="red">OUR</span>
                                            PRODUCTS
                                        </h3>
                                        <h2
                                            class="f-30 mt-10 i18n"
                                            name="our_products"
                                        ></h2>
                                    </div>
                                    <div
                                        class="tab_box flex-center scroll-animate"
                                        data-effect="fn3"
                                        data-delay=".2"
                                    >
                                        <div
                                            class="tab_li f-20"
                                            :class="{'red':proIndex == i}"
                                            v-for="(item,i) in proTabList"
                                            @click="proTab(item)"
                                        >
                                            <span
                                                :name="item.title"
                                                class="i18n"
                                            ></span>
                                        </div>
                                    </div>
                                </div>
                                <div class="pro_cont mt-100 flex-between">
                                    <div class="pro_left">
                                        <div
                                            class="proSwiper scroll-animate"
                                            data-effect="fn3"
                                        >
                                            <div class="swiper-wrapper">
                                                <div
                                                    class="swiper-slide"
                                                    v-for="(item,i) in productsChildren"
                                                    :key="i"
                                                >
                                                    <div class="li">
                                                        <div class="icon">
                                                            <img
                                                                style="
                                                                    width: 36px;
                                                                    height: 36px;
                                                                "
                                                                :src="basePath +item.icon_url"
                                                                alt=""
                                                            />
                                                        </div>
                                                        <p class="f-18 mt-14">
                                                            {{userLanguage ===
                                                            ZH_CN?item.name:item.name_en}}
                                                        </p>
                                                        <div class="add mt-18">
                                                            <img
                                                                src="static/image/add_red.png"
                                                                alt=""
                                                            />
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <div
                                                class="proswiper_bot flex-between mt-60 scroll-animate"
                                                data-effect="fn3"
                                                data-delay=".3"
                                            >
                                                <div
                                                    class="swiper-pagination flex-center"
                                                ></div>
                                                <div class="more">
                                                    <a
                                                        href="/product.html"
                                                        class="f-16 flex-center"
                                                        ><img
                                                            src="static/image/add_red.png"
                                                            alt=""
                                                        /><span
                                                            style="
                                                                font-size: 18px;
                                                            "
                                                            class="i18n"
                                                            name="more_on_this_series"
                                                        ></span>
                                                    </a>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="pro_right scroll-animate"
                                        data-effect="fn3"
                                        data-delay=".3"
                                    >
                                        <div class="img">
                                            <img :src="proImg" alt="" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div
                            class="ink flex-center bc pt-100 pb-100"
                            data-nav="0"
                            :style="'background-image: url(' + inkbackground + ')'"
                        >
                            <div
                                class="ink_cont max-wid pt-32 pb-32 flex-between align-center"
                            >
                                <div class="ink_left">
                                    <div
                                        class="title scroll-animate"
                                        data-effect="fn3"
                                    >
                                        <h3 class="f-16">
                                            <span class="red">INK</span>
                                            CUSTOMIZED
                                        </h3>
                                        <h2
                                            class="f-30 mt-10 i18n"
                                            name="ink_customized"
                                        ></h2>
                                    </div>
                                    <div
                                        class="more_btn black_btn mt-80 scroll-animate"
                                        data-effect="fn3"
                                        data-delay=".1"
                                    >
                                        <a href="" class="f-18"
                                            ><span
                                                style="font-size: 18px"
                                                class="i18n"
                                                name="more_ink_products"
                                            ></span>
                                            <img src="static/image/add_red.png"
                                        /></a>
                                    </div>
                                </div>
                                <div
                                    class="ink_right scroll-animate"
                                    data-effect="fn3"
                                    data-delay=".4"
                                >
                                    <ul class="ink_ul flex">
                                        <li>
                                            <div class="icon">
                                                <img
                                                    src="static/image/b_icon1.png"
                                                    alt=""
                                                />
                                            </div>
                                            <p
                                                class="f-20 mt-30 i18n"
                                                name="writing_ink"
                                            ></p>
                                            <p
                                                class="f-20 mt-14 i18n"
                                                name="personalized_customization"
                                            ></p>
                                            <div class="add mt-14">
                                                <img
                                                    src="static/image/add_red.png"
                                                    alt=""
                                                />
                                            </div>
                                        </li>
                                        <li>
                                            <div class="icon">
                                                <img
                                                    src="static/image/b_icon2.png"
                                                    alt=""
                                                />
                                            </div>
                                            <p
                                                class="f-20 mt-30 i18n"
                                                name="disperse_inkjet_ink"
                                            ></p>
                                            <p
                                                class="f-20 mt-14 i18n"
                                                name="personalized_customization"
                                            ></p>
                                            <div class="add mt-14">
                                                <img
                                                    src="static/image/add_red.png"
                                                    alt=""
                                                />
                                            </div>
                                        </li>
                                        <li>
                                            <div class="icon">
                                                <img
                                                    src="static/image/b_icon3.png"
                                                    alt=""
                                                />
                                            </div>
                                            <p
                                                class="f-20 mt-30 i18n"
                                                name="printing_as_a_whole"
                                            ></p>
                                            <p
                                                class="f-20 mt-14 i18n"
                                                name="solution_provision"
                                            ></p>
                                            <div class="add mt-14">
                                                <img
                                                    src="static/image/add_red.png"
                                                    alt=""
                                                />
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                        <!-- 公司理念 -->
                        <div
                            class="row r3"
                            data-nav="1"
                            :style="'background-image: url(' + r3_background + ')'"
                        >
                            <div class="max-wid pt-100 pb-100 mb-20">
                                <div
                                    class="title scroll-animate"
                                    data-effect="fn3"
                                >
                                    <h3 class="f-16">
                                        <span class="red">COMPANY</span>
                                        PHILOSOPHY
                                    </h3>
                                    <h2
                                        class="f-30 mt-10 i18n"
                                        name="company_philosophy"
                                    ></h2>
                                </div>
                                <div class="com_cont mt-100">
                                    <ul class="com_list flex-between">
                                        <li
                                            v-for="(item,i) in comList"
                                            :key="i"
                                            class="scroll-animate"
                                            data-effect="fn3"
                                            :data-delay="'.'+(i+1)"
                                        >
                                            <div class="img">
                                                <img
                                                    :src="item.imgUrl"
                                                    alt=""
                                                />
                                            </div>
                                            <div
                                                class="info"
                                                :class="i % 2 == 0 ? 'mt-60':'mb-60'"
                                            >
                                                <div class="icon">
                                                    <img
                                                        :src="item.iconImg"
                                                        alt=""
                                                    />
                                                </div>
                                                <p
                                                    class="f-18 mt-30 i18n"
                                                    :name="item.content"
                                                ></p>
                                                <h3
                                                    class="red f-30 mt-14 i18n"
                                                    :name="item.title"
                                                ></h3>
                                            </div>
                                        </li>
                                    </ul>
                                    <div
                                        class="more_btn black_btn mt-100 scroll-animate mauto"
                                        data-effect="fn3"
                                        data-delay=".1"
                                    >
                                        <a href="" class="f-18"
                                            ><span
                                                style="font-size: 18px"
                                                class="i18n"
                                                name="view_more"
                                            ></span>
                                            <img src="static/image/add_red.png"
                                        /></a>
                                    </div>
                                </div>
                            </div>
                            <div class="bg_txt">
                                <img src="static/image/c4_bgt.png" alt="" />
                            </div>
                        </div>
                        <!-- 新闻资讯 -->
                        <div
                            class="r4"
                            id="r4"
                            data-nav="1"
                            style="background-color: #f6f7fa"
                        >
                            <div class="news_box max-wid pt-100 pb-100 pt-50">
                                <div class="news_top flex-between">
                                    <div
                                        class="title scroll-animate"
                                        data-effect="fn3"
                                    >
                                        <h3 class="f-16">
                                            <span class="red">NEWS</span>
                                            INFORMATION
                                        </h3>
                                        <h2
                                            class="f-30 mt-10 i18n"
                                            name="news_information"
                                        ></h2>
                                    </div>
                                    <p
                                        class="scroll-animate f-24"
                                        data-effect="fn3"
                                        data-delay=".3"
                                    >
                                        <span
                                            style="font-size: 24px"
                                            class="i18n"
                                            name="to_provide_you_with_new_national_treasures"
                                        ></span
                                        ><br />
                                        <span
                                            style="font-size: 24px"
                                            class="i18n"
                                            name="latest_updates_or_news"
                                        ></span>
                                    </p>
                                </div>
                                <ul class="news_list mt-60 flex-between">
                                    <li
                                        v-for="(item,i) in newsList"
                                        :key="i"
                                        class="scroll-animate"
                                        data-effect="fn3"
                                        :data-delay="'.'+(i+1)"
                                    >
                                        <a
                                            :href="'/news_info.html?id='+item.id"
                                        >
                                            <div class="img">
                                                <img
                                                    :src="basePath + item.cover_url"
                                                    alt=""
                                                />
                                            </div>
                                            <div class="info mt-20">
                                                <h3
                                                    class="f-16 i18n"
                                                    :name="NEW_TYPE[item.type]"
                                                ></h3>
                                                <div class="txt mt-16 f-20">
                                                    {{userLanguage ===
                                                    ZH_CN?item.title:item.title_en}}
                                                </div>
                                                <p class="date mt-22">
                                                    {{item.publish_date}}
                                                </p>
                                            </div>
                                        </a>
                                    </li>
                                </ul>
                                <div
                                    class="more_btn black_btn mt-60 scroll-animate mauto"
                                    data-effect="fn3"
                                    data-delay=".1"
                                >
                                    <a href="" class="f-18"
                                        ><span
                                            style="font-size: 18px"
                                            name="view_more"
                                            class="i18n"
                                        ></span>
                                        <img src="static/image/add_red.png"
                                    /></a>
                                </div>
                            </div>
                        </div>
                        <footer
                            style="background-image: url('static/image/foot_bg.jpg"
                        >
                            <div
                                class="pt-60 pb-60 foot_nav align-center flex-between"
                            >
                                <div class="foot_logo">
                                    <a href="" title=""
                                        ><img
                                            class="lazy"
                                            data-src="static/image/logo.png"
                                            alt="logo"
                                    /></a>
                                </div>
                                <ul class="foot_nav_list flex">
                                    <li v-for="(item,i) in navList" :key="i">
                                        <a
                                            :name="item.title"
                                            :href="item.url"
                                            class="f-16 i18n"
                                        ></a>
                                    </li>
                                </ul>
                            </div>
                            <div
                                class="mark_p flex-between flex-center pt-60 pb-30"
                            >
                                <p class="f-12">
                                    COPYRIGHT 2023 XINGUOBAO.COM ALL RIGHTS
                                    RESERVED
                                    <a
                                        class="f-12"
                                        href="https://beian.miit.gov.cn/#/Integrated/index"
                                        target="_blank"
                                        >{{webSite.record_number}}</a
                                    >
                                </p>

                                <div class="f_icon flex-center">
                                    <div class="icon">
                                        <img
                                            src="static/image/f_icon1.png"
                                            alt=""
                                        />
                                    </div>
                                    <div class="icon">
                                        <img
                                            src="static/image/f_icon2.png"
                                            alt=""
                                        />
                                    </div>
                                    <div class="icon">
                                        <img
                                            src="static/image/f_icon3.png"
                                            alt=""
                                        />
                                    </div>
                                </div>
                            </div>
                        </footer>
                    </div>
                </div>
            </article>
        </div>
    </body>
    <script type="text/javascript" src="static/js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="api/index.js"></script>
    <script type="text/javascript" src="static/js/common.js"></script>
    <script src="static/js/jquery.i18n.properties.js.js"></script>
    <script src="static/js/i18n.js"></script>
    <script>
        Vue.nextTick(function () {});
        var app = null;
        const userLanguage = getCookie("userLanguage");
        app = new Vue({
            el: "#bloc",
            data: {
                ZH_CN,
                EN,
                userLanguage,
                basePath: "",
                company: {},
                webSite: {},
                logoImg: "static/image/logo.png",
                logoImg2: "static/image/logo2.png",
                //导航
                navIndex: 0,
                navList,
                bannerList: [
                    {
                        imgUrl: "static/image/banner1.jpg",
                    },
                    {
                        imgUrl: "static/image/banner1.jpg",
                    },
                    {
                        imgUrl: "static/image/banner1.jpg",
                    },
                    {
                        imgUrl: "static/image/banner1.jpg",
                    },
                ],
                total_num: 4,
                r2_background: "static/image/pro_bg.jpg",
                inkbackground: "static/image/ink_bg.jpg",
                r3_background: "static/image/c4_bg.png",
                photoList: [
                    {
                        imgUrl: "static/image/a1.png",
                    },
                    {
                        imgUrl: "static/image/a2.png",
                    },
                    {
                        imgUrl: "static/image/a3.png",
                    },
                    {
                        imgUrl: "static/image/a4.png",
                    },
                    {
                        imgUrl: "static/image/a5.png",
                    },
                    {
                        imgUrl: "static/image/a6.png",
                    },
                    {
                        imgUrl: "static/image/a7.png",
                    },
                    {
                        imgUrl: "static/image/a8.png",
                    },
                    {
                        imgUrl: "static/image/a9.png",
                    },
                    {
                        imgUrl: "static/image/a10.png",
                    },
                    {
                        imgUrl: "static/image/a11.png",
                    },
                    {
                        imgUrl: "static/image/a12.png",
                    },
                ],
                proTabList: [
                    {
                        title: "writing_ink",
                        type: 0,
                    },
                    {
                        title: "digital_inkjet",
                        type: 1,
                    },
                ],
                proIndex: 0,
                proList: [
                    {
                        iconImg: "static/image/p_icon1.png",
                        title: "溶剂型记号",
                    },
                    {
                        iconImg: "static/image/p_icon2.png",
                        title: "记号笔墨水",
                    },
                    {
                        iconImg: "static/image/p_icon3.png",
                        title: "水性记号笔墨水",
                    },
                    {
                        iconImg: "static/image/p_icon1.png",
                        title: "溶剂型记号",
                    },
                    {
                        iconImg: "static/image/p_icon4.png",
                        title: "特殊记号墨水",
                    },
                    {
                        iconImg: "static/image/p_icon5.png",
                        title: "勾线笔墨水",
                    },
                    {
                        iconImg: "static/image/p_icon6.png",
                        title: "宝珠笔/走珠笔墨水",
                    },
                    {
                        iconImg: "static/image/p_icon1.png",
                        title: "溶剂型记号",
                    },
                    {
                        iconImg: "static/image/p_icon2.png",
                        title: "记号笔墨水",
                    },
                    {
                        iconImg: "static/image/p_icon3.png",
                        title: "水性记号笔墨水",
                    },
                    {
                        iconImg: "static/image/p_icon1.png",
                        title: "溶剂型记号",
                    },
                    {
                        iconImg: "static/image/p_icon4.png",
                        title: "特殊记号墨水",
                    },
                    {
                        iconImg: "static/image/p_icon5.png",
                        title: "勾线笔墨水",
                    },
                    {
                        iconImg: "static/image/p_icon6.png",
                        title: "宝珠笔/走珠笔墨水",
                    },
                ],
                proImg: "static/image/pro1.png",
                comList: [
                    {
                        imgUrl: "static/image/c_img1.png",
                        iconImg: "static/image/p_icon3.png",
                        content: "continuous_innovation_and_excellent_quality",
                        title: "vision",
                    },
                    {
                        imgUrl: "static/image/c_img2.png",
                        iconImg: "static/image/p_icon5.png",
                        content: "creating_a_colorful_world",
                        title: "mission",
                    },
                    {
                        imgUrl: "static/image/c_img3.png",
                        iconImg: "static/image/p_icon4.png",
                        content:
                            "customer_first_innovative_and_enterprising_integrity",
                        title: "core_values",
                    },
                ],
                newsList: [],
                NEW_TYPE,
                banners: [],
                productsChildren: [],
                pages: 1,
            },
            created: function () {
                var that = this;
                this.getCompany();
                this.getWebSite();
                this.getNews();
                this.getBasePath();
                this.getBanners();
                this.getProductsChildren();
            },

            methods: {
                setSize() {
                    this.$nextTick(() => {
                        base && base.setSize();
                    });
                },
                getProductsChildren() {
                    $.ajax({
                        url: `${BASE_URL}/productsChildren`,
                        dataType: "json",
                        type: "get",
                        data: {
                            type: this.proIndex || 0,
                        },
                        success: (res) => {
                            if (res.code === CODE_SUCCESS) {
                                this.productsChildren = res.data.list;
                                this.pages = res.data.pages;
                                this.$nextTick(() => {
                                    var proSwiper = new Swiper(".proSwiper", {
                                        slidesPerView: 3,
                                        slidesPerColumn: 2,
                                        spaceBetween: 30,
                                        breakpoints: {
                                            1200: {
                                                spaceBetween: 30,
                                            },
                                            768: {
                                                spaceBetween: 20,
                                            },
                                            200: {
                                                spaceBetween: 10,
                                            },
                                        },

                                        pagination: {
                                            el: ".proSwiper .swiper-pagination",
                                            clickable: true,
                                            renderBullet: function (
                                                index,
                                                className
                                            ) {
                                                return (
                                                    '<span class="f-16 ' +
                                                    className +
                                                    '">' +
                                                    (index + 1 < 9
                                                        ? "0" + (index + 1)
                                                        : index + 1) +
                                                    "</span>"
                                                );
                                            },
                                        },
                                    });
                                });
                            }
                            this.setSize();
                        },
                    });
                },
                getBasePath() {
                    $.ajax({
                        url: `${BASE_URL}/getBasePath`,
                        dataType: "json",
                        type: "get",
                        success: (res) => {
                            if (res.code === CODE_SUCCESS) {
                                this.basePath = res.data;
                            }
                            this.setSize();
                        },
                    });
                },
                getBanners() {
                    $.ajax({
                        url: `${BASE_URL}/banners`,
                        dataType: "json",
                        type: "get",
                        data: {
                            page_type: "index",
                        },
                        success: (res) => {
                            if (res.code === CODE_SUCCESS) {
                                this.banners = res.data.list;
                            }
                            this.$nextTick(() => {
                                //所有监听
                                var swiper = new Swiper(".swiper", {
                                    autoplay: {
                                        delay: 5000,
                                        stopOnLastSlide: false,
                                        disableOnInteraction: true,
                                    },
                                    observer: true, //修改swiper自己或子元素时，自动初始化swiper
                                    observeParents: true, //修改swiper的父元素时，自动初始化swiper
                                    pagination: {
                                        el: ".inner .swiper-pagination",
                                        clickable: true,
                                    },
                                    followFinger: false,
                                    speed: 800,
                                    mousewheel: true,
                                    on: {
                                        init: function (swiper) {
                                            slide = this.slides.eq(0);
                                            slide.addClass("ani-slide");
                                        },
                                        transitionStart: function () {
                                            for (
                                                i = 0;
                                                i < this.slides.length;
                                                i++
                                            ) {
                                                slide = this.slides.eq(i);
                                                slide.removeClass("ani-slide");
                                            }
                                        },
                                        transitionEnd: function () {
                                            slide = this.slides.eq(
                                                this.activeIndex
                                            );
                                            slide.removeClass("ani-slide");
                                            slide.addClass("ani-slide");
                                            $(".bannerIndex").text(
                                                "0" + (this.activeIndex + 1)
                                            );
                                        },
                                    },
                                });
                            });
                            this.setSize();
                        },
                    });
                },
                getNews() {
                    $.ajax({
                        url: `${BASE_URL}/news`,
                        dataType: "json",
                        type: "get",
                        data: { size: 3 },
                        success: (res) => {
                            if (res.code === CODE_SUCCESS) {
                                this.newsList = res.data.list;
                                this.$nextTick(() => {
                                    execI18n();
                                });
                            }
                            this.setSize();
                        },
                    });
                },
                getCompany() {
                    $.ajax({
                        url: `${BASE_URL}/company`,
                        dataType: "json",
                        type: "get",
                        success: (res) => {
                            if (res.code === CODE_SUCCESS) {
                                this.company = res.data;
                            }
                            this.setSize();
                        },
                    });
                },
                getWebSite() {
                    $.ajax({
                        url: `${BASE_URL}/webSite`,
                        dataType: "json",
                        type: "get",
                        success: (res) => {
                            if (res.code === CODE_SUCCESS) {
                                this.webSite = res.data;
                            }
                            this.setSize();
                        },
                    });
                },
                proTab(item) {
                    this.proIndex = item.type;
                    this.getProductsChildren();
                    this.setSize();
                },
            },
        });
    </script>

    <script type="text/javascript" src="static/js/TweenMax.min.js"></script>
    <script type="text/javascript" src="static/js/zhcool_inner.min.js"></script>
    <script type="text/javascript" src="static/js/app.min.js?v=1"></script>
</html>
